<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link href="./css/animation.css" rel="stylesheet">
    <link href="./css/page4.css" rel="stylesheet">
    <link href="./css/fly.css" rel="stylesheet" >
    <script src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript" src="./js/screenPlan.js"></script>
    <style>

    </style>
</head>
<body>
    <div id="page4" class="page4">
        <!--<div class="area1">
            <img src="img4/柱状图.png" />
            <div class="red-zhuzi"></div>
        </div>-->
        <div class="therm">
            <div class="red-zhuzi therm-son"></div>
        </div>
        <div class="therm_point">
        </div>

        <img class="ke-du" src="img4/刻度.png">
        <img class="boy biao-bai1" src="img4/boy.png">
        <img class="girl biao-bai1" src="img4/girl.png">
        <img class="circle biao-bai1" src="img4/circle.png">
        <img class="break-heart biao-bai1" src="img4/breakHeart.png">
        <div class="msg1">" 我喜欢你 "</div>
        <div class="msg2">" 我不喜欢你 "</div>
        <div class="msg3">" 为什么 "</div>
        <div class="msg4">" 喜欢你犯法 "</div>
        <div class="msg-fail1 biao-bai1">" 再见，初恋 "</div>
        <div class="msg-fail2 biao-bai1">" 龙哥第N-1次表白失败 "</div>


        <img class="heart biao-bai2" src="img4/broken_heart1.png">
        <img class="circle2 biao-bai2" src="img4/circle2.png">
        <div class="msg11">" 我暗恋你很久了 "</div>
        <div class="msg22">" 然后呢 "</div>
        <div class="msg33">" ... ... ... "</div>
        <div class="msg44">" ... ... ... "</div>
        <div class="msg-fail11 biao-bai2">" 再见，爱情 "</div>
        <div class="msg-fail22 biao-bai2">" 龙哥第N-10次表白失败 "</div>

        <img class="man biao-bai3" src="img4/man1.png">
        <img class="woman biao-bai3" src="img4/woman.png">
        <div class="msg111">" 小姐姐，问个路 "</div>
        <div class="msg222">" 你要去哪里 "</div>
        <div class="msg333">" 我要去你心里 "</div>
        <div class="msg444">" 我的心如大山你会迷路的 "</div>
        <div class="msg-fail111 biao-bai3">" 再见，套路 "</div>
        <div class="msg-fail222 biao-bai3">" 龙哥第N-20次表白失败 "</div>

        <div class="my-audio" >
            <audio src="vedio/keybord.mp3" controls="controls" preload id="keybord" hidden />
            <audio src="vedio/乌鸦.mp3" controls="controls" preload id="wuya" hidden />
            <audio src="vedio/笑声.mp3" controls="controls" preload id="xiaosheng" hidden />
            <audio src="vedio/嘘声.mp3" controls="controls" preload id="xusheng" hidden />
            <audio src="vedio/轻快.mp3" controls="controls" preload id="qingkuai" hidden />
            <audio src="vedio/ILoveYou.mp3" controls="controls" preload id="iloveyou" hidden />
            <audio src="vedio/bgm.mp3" controls="controls" preload id="bgm" hidden />
        </div>
    </div>
    <div id="page5" class="page5">
        <img class="icon1" src="img4/icon1.png">
        <div class="zhuzi zhuzi-move"></div>
        <div class="jump_heart"></div>
        <img class="zhiwen" src="img4/zhiwen.png">
        <img class="page5-word6" src="img4/word6.png">
        <div class="word-box">
            <img class="page5-word1" src="img4/word1.png">
            <img class="page5-word2" src="img4/word2.png">
            <img class="page5-word3" src="img4/word3.png">
            <img class="page5-word4" src="img4/word4.png">
            <img class="page5-word5" src="img4/word5.png">
        </div>
    </div>
    <div class="left-fly-heart">
        <div class="fly_heart">
        </div>
    </div>
    <div class="right-fly-heart">
        <div class="fly_UP">
        </div>
    </div>
</body>
<script>
    $(function () {
      // 处理页面宽高
//      var winHeight = $(window).height();
//      var areaHeight = $(".page4").height();
//      var marginTop = winHeight - areaHeight;
//      if (marginTop > 0) {
//        $(".page4").css("margin-top", marginTop/2);
//      }
      // 处理柱状图宽高
//      var zhuWidth = $(".area1").width();
//      var zhuHeight = zhuWidth * 1923 / 388 + 4;
//      $(".area1").height(zhuHeight);

//      $(window).resize(function () {
//        var winHeight = $(window).height();
//        var areaHeight = $(".page4").height();
//        var marginTop = winHeight - areaHeight;
//        if (marginTop > 0) {
//          $(".page4").css("margin-top", marginTop/2);
//        }
//      })
//      return;
      function audioAutoPlay(audio) {
        audio.play();
        document.addEventListener("WeixinJSBridgeReady", function () {
          audio.play();
        }, false);

      }

      var keybord = document.getElementById('keybord');
      var xiaosheng = document.getElementById('xiaosheng');
      var wuya = document.getElementById('wuya');
      var xusheng = document.getElementById('xusheng');
      var qingkuai = document.getElementById('qingkuai');
      var iloveyou = document.getElementById('iloveyou');
      var bgm = document.getElementById('bgm');
      qingkuai.volume = 0.2;
      $(".red-zhuzi").addClass("high-count");
      $(".msg1").addClass("jian-ru-boy");
      $(".boy").show().addClass("boy-in");
      audioAutoPlay(keybord);
      audioAutoPlay(qingkuai);
      setTimeout(function () {
        $(".circle").fadeIn();
        $(".girl").show().addClass("girl-in");
        $(".msg2").addClass("jian-ru-girl");
      }, 1000);
      setTimeout(function () {
        $(".msg3").addClass("jian-ru-boy");
        keybord.play();
      }, 3000);
      setTimeout(function () {
        $(".msg4").addClass("jian-ru-girl");
      }, 5000);
      setTimeout(function () {
        $(".break-heart").fadeIn();
        xiaosheng.play();
      }, 5000);
      setTimeout(function () {
        $(".msg-fail1").show().addClass("fail1-show");
      }, 6000);
      setTimeout(function () {
        $(".msg-fail2").show().addClass("fail2-show");
      }, 7000);
      setTimeout(function () {
        $(".biao-bai1").fadeOut();
      }, 8000);

      // 第二段
      setTimeout(function () {
        $(".high-count").addClass("high-count2");
        $(".msg11").addClass("jian-ru-boy");
        $(".heart").show().addClass("boy-in");
        keybord.play();
      }, 8000);
      setTimeout(function () {
        $(".msg22").addClass("jian-ru-girl");
        $(".circle2").fadeIn();
      }, 9000);
      setTimeout(function () {
        $(".msg33").addClass("jian-ru-boy");
      }, 10000);
      setTimeout(function () {
        $(".msg44").addClass("jian-ru-girl");
        wuya.play();
      }, 11000);
      setTimeout(function () {
        $(".heart").attr("src", "img4/broken_heart3.png");
        $(".msg-fail11").show().addClass("fail1-show");
      }, 13000);
      setTimeout(function () {
        $(".msg-fail22").show().addClass("fail2-show");
      }, 13600);
      setTimeout(function () {
        $(".biao-bai1").fadeOut();
      }, 15000);
      setTimeout(function () {
        $(".biao-bai2").fadeOut();
      }, 16000);


      // 第三段
      setTimeout(function () {
        $(".high-count").addClass("high-count3");
        $(".man").show().addClass("boy-in");
        $(".msg111").addClass("jian-ru-boy");
        keybord.play();
      }, 17000);
      setTimeout(function () {
        $(".woman").show().addClass("girl-in");
        $(".msg222").addClass("jian-ru-girl");
      }, 18000);
      setTimeout(function () {
        $(".msg333").addClass("jian-ru-boy");
        keybord.play();
      }, 19000);
      setTimeout(function () {
        $(".msg444").addClass("jian-ru-girl");
      }, 20000);
      setTimeout(function () {
        $(".man").addClass("man2").attr("src", "img4/man2.png");
        $(".msg-fail111").show().addClass("fail1-show");
        xusheng.play();
      }, 22000);
      setTimeout(function () {
        $(".msg-fail222").show().addClass("fail2-show");
      }, 23000);

      setTimeout(function () {
        $(".page4").fadeOut();
        $(".page5").fadeIn();
        iloveyou.play();
      }, 24000);
      setTimeout(function () {
        $(".left-fly-heart").show().addClass("flying_left");
        $(".right-fly-heart").show().addClass("flying_right");
        $(".page5").fadeIn();
        $(".page5-word1").show().addClass("word1-in");
      }, 25000);
      setTimeout(function () {
        $(".page5-word2").show().addClass("word2-in");
      }, 26000);
      setTimeout(function () {
        $(".page5-word3").show().addClass("word3-in");
      }, 28000);
      setTimeout(function () {
        $(".page5-word4").show().addClass("word4-in");
      }, 30000);
      setTimeout(function () {
        $(".page5-word5").show().addClass("word5-in");
        qingkuai.pause();
      }, 32000);

      // 指纹点击
      var defaultHeight = 1.1;
      var defaultBottom = 3.4;
      $(".zhiwen").click(function () {
        defaultHeight = defaultHeight + 0.3;
        defaultBottom = defaultBottom + 0.3;
        if (defaultHeight > 8.9) {
          $(".zhuzi").addClass("zhuzi-full");
          $Page4.fadeOut();
          $Page5.fadeOut();
          $Page6.fadeIn();
        } else {
          $(".zhuzi").removeClass("zhuzi-move").css("height", defaultHeight + "rem");
        }
        $(".jump_heart").css("bottom", defaultBottom + "rem");
      })
    })
</script>
</html>